<template>
  <div class="header">
    <el-row>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">项目名称：</span>
          <span class="value">{{ baseInfo.name }}</span>
        </div>
      </el-col>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">项目编码：</span>
          <span class="value">{{ baseInfo.code }}</span>
        </div>
      </el-col>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">项目详细地址：</span>
          <span class="value">{{ baseInfo.address }}</span>
        </div>
      </el-col>
      <!-- <el-col :span="6" class="info-item">
        <div class="table-row">
          <span class="label">项目建设阶段：</span>
          <span class="value">{{
            baseInfo.buildStage
          }}</span>
        </div>
      </el-col> -->
    </el-row>

    <el-row>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">资金来源：</span>
          <span class="value">{{
            baseInfo.fundBuildSource
          }}</span>
        </div>
      </el-col>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">业主(建设单位)：</span>
          <span class="value">{{
            baseInfo.ownerUnit
          }}</span>
        </div>
      </el-col>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">总投资(万元)：</span>
          <span class="value">{{
            baseInfo.investmentTotal
          }}</span>
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <span>是否发债：</span>
        <span>{{ baseInfo.bondFlag }}</span>
      </el-col> -->
    </el-row>

    <el-row>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">项目类型：</span>
          <span class="value">{{
            baseInfo.projectBusinessType
          }}</span>
        </div>
      </el-col>
      <el-col :span="8" class="info-item">
        <div class="table-row">
          <span class="label">项目类型Ⅱ：</span>
          <span class="value">{{
            baseInfo.projectBusinessDepartType
          }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    baseInfo: {
      type: Object
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: rgb(246, 246, 246);
  padding: 10px 20px;
  margin: 10px;
  color: #3f3e3e;
  border-radius: 5px;

  .el-row {
    margin: 10px 0;
  }

  .el-col span:nth-of-type(2) {
    color: #7c7a7a;
  }
}

.info-item {
  .table-row {
    display: table;
    width: 100%;
  }

  .label {
    display: table-cell;
    width: 90px;
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
    vertical-align: top;
  }

  .value {
    display: table-cell;
    word-break: break-word;
    vertical-align: top;
  }
}
</style>
